<template>
  <div class="home">
    <h3>{{ state.name }}</h3>
    <div>{{ state.age }} - {{ state.weChat }}</div>
    <button @click="getData">获取数据</button>
    <ul v-for="user in state.users" :key="user.id">
      <li>{{ user.name }}</li>
    </ul>
    <div>{{ plusOne }}</div>
  </div>
</template>

<script>
import { reactive, ref, computed, onMounted, watchEffect } from "vue";
import axios from "axios";
export default {
  name: "Home",
  components: {},
  props: {
    myname: String,
  },
  //  context = {attrs,slots,emit}
  setup(props, context) {
    watchEffect(() => {
      console.log(`name is: ` + props.myname);
    });
    const state = reactive({
      name: "hsl",
      age: 22,
      weChat: 123243,
      users: [],
    });
    const count = ref(1);
    const plusOne = computed({
      get: () => count.value + 1,
      set: (val) => {
        count.value = val - 1;
      },
    });
    function getData() {
      axios.get("http://jsonplaceholder.typicode.com/users").then((res) => {
        state.users = res.data;
      });
    }
    onMounted(() => {
      // getData();
    });
    return {
      state,
      getData,
      plusOne,
    };
    // 渲染功能/ JSX的用法: setup 还可以返回一个render函数，该函数可以直接使用在同一作用域中声明的反应状态
    // return () => h('div', [count.value, object.foo])
  },
};
</script>
